<template>
  <div class="xd-LearningHome-PoliticalWorkPlan p_10">
    <el-container>
      <el-aside width="120px">
        <!-- <p class="text_size_7 text_color_429688 first-title">工作计划发布</p> -->
        <p
          v-for="(item, idx) in sideList"
          class="item"
          :class="{'active': sideActive === idx}"
          :key="idx"
          @click="changeSide(idx)"
        >
          {{item}}
          <img src="@/assets/imgs/icon_left_sanjiao.png" />
        </p>
      </el-aside>
      <el-main>
        <el-tabs @tab-click="planTabClick" v-show="sideActive === 1" class="el-tabs-first-indent">
          <el-tab-pane label="添加" v-if="permissions.add">
            <el-form :inline="true" ref="addForm" :model="addForm" size="small">
              <el-form-item prop="planType">
                <el-select
                  v-model="addForm.planType"
                  placeholder="请选择计划类型"
                  clearable
                  style="width: 146px;"
                >
                  <el-option label="月度计划" :value="1"></el-option>
                  <el-option label="年度计划" :value="2"></el-option>
                  <el-option label="单位年度计划" :value="3"></el-option>
                  <el-option label="单位月度计划" :value="4"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="name">
                <el-input
                  v-model="addForm.name"
                  clearable
                  placeholder="请输入计划名称"
                  style="width: 146px;"
                ></el-input>
              </el-form-item>
              <el-form-item prop="year">
                <el-date-picker
                  v-model="addForm.year"
                  type="year"
                  value-format="yyyy"
                  placeholder="请选择计划年度"
                  clearable
                  style="width: 156px;"
                ></el-date-picker>
              </el-form-item>
              <el-form-item prop="month">
                <el-date-picker
                  v-model="addForm.month"
                  type="month"
                  placeholder="请选择计划月份"
                  clearable
                  style="width: 156px;"
                  value-format="yyyy-MM"
                ></el-date-picker>
              </el-form-item>
              <el-form-item prop="group">
                <el-select
                  v-model="addForm.group"
                  placeholder="请选择业务组"
                  clearable
                  style="width: 146px;"
                >
                  <template v-for="(item, idx) in groupNameList">
                    <el-option :key="idx" :label="item.label" :value="item.value"></el-option>
                  </template>
                </el-select>
              </el-form-item>
              <el-form-item prop="status">
                <el-select
                  v-model="addForm.status"
                  placeholder="领导审核状态"
                  clearable
                  style="width: 146px;"
                >
                  <el-option label="待审核" :value="0"></el-option>
                  <el-option label="通过" :value="1"></el-option>
                  <el-option label="不通过" :value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="planStatus">
                <el-select
                  v-model="addForm.planStatus"
                  placeholder="请选择计划状态"
                  clearable
                  style="width: 146px;"
                >
                  <el-option label="未开始" :value="2"></el-option>
                  <el-option label="进行中" :value="0"></el-option>
                  <el-option label="已完成" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <div class="tool-bar">
                <el-button @click="resetForm('addForm', 'add')" size="small">重置</el-button>
                <el-button type="primary" @click="searchPlan" size="small">查询</el-button>
              </div>
            </el-form>
            <div style="padding-left:40px;">
              <el-button type="primary" size="small" icon="el-icon-plus" @click="addPlan">添加计划</el-button>
            </div>
            <el-divider></el-divider>
            <div class="plan-table-details">
              <el-table :data="planTableData" border stripe style="width: 100%;">
                <el-table-column
                  prop="planType"
                  label="计划类型"
                  width="68"
                  header-align="center"
                  align="center"
                >
                  <template slot-scope="scope">{{scope.row.planType===1?'月度计划':'年度计划'}}</template>
                </el-table-column>
                <el-table-column
                  prop="planYear"
                  label="计划年度"
                  width="40"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="planMonth"
                  label="计划月份"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="planGroupName"
                  label="业务组"
                  width="50"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column prop="planTitle" label="计划名称" width="98" header-align="center"></el-table-column>
                <el-table-column
                  prop="steps"
                  label="推进步骤"
                  header-align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      v-text="item.step_title"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    ></div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="steps"
                  label="计划完成时间"
                  width="68"
                  header-align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <div v-text="item.complate_date" class="progress"></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="qtUserNames" label="牵头负责人" width="71" align="center"></el-table-column>
                <el-table-column
                  prop="zrUserNames"
                  label="推进落实人"
                  header-align="center"
                  align="center"
                  width="71"
                ></el-table-column>
                <el-table-column
                  prop="leaderCheckStateName"
                  label="领导审批意见"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="planStatusName"
                  label="计划状态"
                  width="60"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="最新更新进度"
                  width="68"
                  header-align="center"
                  align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <div v-text="item.step_progress+'%'" class="progress"></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="更新记录"
                  width="40"
                  header-align="center"
                  align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <el-link
                        type="primary"
                        class="progress"
                        :underline="false"
                        @click="showStepDetail(item)"
                      >查看</el-link>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="68" header-align="center" align="center">
                  <template slot-scope="scope">
                    <template v-if="scope.row.leaderCheckState!==1">
                      <el-link type="primary" :underline="false" @click="editPlan(scope.row)">编辑</el-link>
                      <div style="height:5px;"></div>
                      <el-link type="danger" :underline="false" @click="delPlan(scope.row)">删除</el-link>
                    </template>
                    <template v-else>
                      <el-link type="primary" :underline="false" @click="editPlan(scope.row)">更新进度</el-link>
                    </template>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="planAddSizeChange"
                @current-change="planAddCurrentChange"
                :current-page="addForm.page"
                :page-sizes="[10, 20, 30, 40,50]"
                :page-size="addForm.size"
                :layout="PAGE_LAYOUT"
                :total="planTableTotal"
              ></el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="汇总" class="group-panel" v-if="permissions.group">
            <el-form :inline="true" ref="groupForm" :model="groupForm" size="small">
              <el-form-item prop="planType">
                <el-select
                  v-model="groupForm.planType"
                  placeholder="请选择计划类型"
                  clearable
                  style="width: 146px;"
                >
                  <el-option label="月度计划" :value="1"></el-option>
                  <el-option label="年度计划" :value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="name">
                <el-input
                  v-model="groupForm.name"
                  clearable
                  placeholder="请输入计划名称"
                  style="width: 146px;"
                ></el-input>
              </el-form-item>
              <el-form-item prop="year">
                <el-date-picker
                  v-model="groupForm.year"
                  type="year"
                  value-format="yyyy"
                  placeholder="请选择计划年度"
                  clearable
                  style="width: 156px;"
                ></el-date-picker>
              </el-form-item>
              <el-form-item prop="month">
                <el-date-picker
                  v-model="groupForm.month"
                  type="month"
                  placeholder="请选择计划月份"
                  clearable
                  style="width: 156px;"
                  value-format="yyyy-MM"
                ></el-date-picker>
              </el-form-item>
              <el-form-item prop="group">
                <el-select
                  v-model="groupForm.group"
                  placeholder="请选择业务组"
                  clearable
                  style="width: 146px;"
                >
                  <template v-for="(item, idx) in groupNameList">
                    <el-option :key="idx" :label="item.label" :value="item.value"></el-option>
                  </template>
                </el-select>
              </el-form-item>
              <el-form-item prop="status">
                <el-select
                  v-model="groupForm.status"
                  placeholder="领导审核状态"
                  clearable
                  style="width: 146px;"
                >
                  <el-option label="待审核" :value="0"></el-option>
                  <el-option label="通过" :value="1"></el-option>
                  <el-option label="不通过" :value="2"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="planStatus">
                <el-select
                  v-model="groupForm.planStatus"
                  placeholder="请选择计划状态"
                  clearable
                  style="width: 146px;"
                >
                  <el-option label="未开始" :value="2"></el-option>
                  <el-option label="进行中" :value="0"></el-option>
                  <el-option label="已完成" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <div class="tool-bar">
                <el-button @click="resetForm('groupForm', 'group')" size="small">重置</el-button>
                <el-button type="primary" @click="searchGroupPlan" size="small">查询</el-button>
              </div>
            </el-form>
            <div style="padding-left:40px;">
              <el-button type="primary" size="small" @click="groupSubmitAudit">汇总提交审核</el-button>
            </div>
            <el-divider></el-divider>
            <div class="plan-table-details">
              <el-table
                :data="groupTableData"
                border
                stripe
                style="width: 100%;"
                @selection-change="onSelectionChange"
              >
                <el-table-column class-name="check-cell" type="selection" width="25" align="center"></el-table-column>
                <el-table-column
                  prop="typeName"
                  label="计划类型"
                  width="68"
                  header-align="center"
                  align="center"
                >
                  <template slot-scope="scope">{{scope.row.planType===1?'月度计划':'年度计划'}}</template>
                </el-table-column>
                <el-table-column
                  prop="planYear"
                  label="计划年度"
                  width="40"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="planMonth"
                  label="计划月份"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="planGroupName"
                  label="业务组"
                  width="50"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column prop="planTitle" label="计划名称" width="98" header-align="center"></el-table-column>
                <el-table-column
                  prop="steps"
                  label="推进步骤"
                  header-align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      v-text="item.step_title"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    ></div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="steps"
                  label="计划完成时间"
                  width="68"
                  header-align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <div v-text="item.complate_date" class="progress"></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="qtUserNames" label="牵头负责人" width="71" align="center"></el-table-column>
                <el-table-column
                  prop="zrUserNames"
                  label="推进落实人"
                  header-align="center"
                  align="center"
                  width="71"
                ></el-table-column>
                <el-table-column
                  prop="leaderCheckStateName"
                  label="领导审批意见"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="planStatusName"
                  label="计划状态"
                  width="60"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="最新更新进度"
                  width="68"
                  header-align="center"
                  align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <div v-text="item.step_progress+'%'" class="progress"></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="更新记录"
                  width="40"
                  header-align="center"
                  align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <el-link
                        type="primary"
                        class="progress"
                        :underline="false"
                        @click="showStepDetail(item)"
                      >查看</el-link>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="68" header-align="center" align="center">
                  <template slot-scope="scope">
                    <template v-if="scope.row.leaderCheckState!==1">
                      <el-link type="primary" :underline="false" @click="editPlan(scope.row)">编辑</el-link>
                      <div style="height:5px;"></div>
                      <el-link type="danger" :underline="false" @click="delPlan(scope.row)">删除</el-link>
                    </template>
                    <template v-else>
                      <el-link type="primary" :underline="false" @click="editPlan(scope.row)">更新进度</el-link>
                    </template>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="groupSizeChange"
                @current-change="groupCurrentChange"
                :current-page="groupForm.page"
                :page-sizes="[10, 20, 30, 40,50]"
                :page-size="groupForm.size"
                :layout="PAGE_LAYOUT"
                :total="groupTableTotal"
              ></el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="审批" class="audit-panel" v-if="permissions.leader">
            <el-form :inline="true" ref="auditForm" :model="auditForm" size="small">
              <el-form-item prop="planType">
                <el-select
                  v-model="auditForm.planType"
                  placeholder="请选择计划类型"
                  clearable
                  style="width: 146px;"
                >
                  <el-option label="月度计划" :value="1"></el-option>
                  <el-option label="年度计划" :value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="name">
                <el-input
                  v-model="auditForm.name"
                  clearable
                  placeholder="请输入计划名称"
                  style="width: 146px;"
                ></el-input>
              </el-form-item>
              <el-form-item prop="year">
                <el-date-picker
                  v-model="auditForm.year"
                  type="year"
                  value-format="yyyy"
                  placeholder="请选择计划年度"
                  clearable
                  style="width: 156px;"
                ></el-date-picker>
              </el-form-item>
              <el-form-item prop="month">
                <el-date-picker
                  v-model="auditForm.month"
                  type="month"
                  placeholder="请选择计划月份"
                  clearable
                  style="width: 156px;"
                  value-format="yyyy-MM"
                ></el-date-picker>
              </el-form-item>
              <el-form-item prop="group">
                <el-select
                  v-model="auditForm.group"
                  placeholder="请选择业务组"
                  clearable
                  style="width: 146px;"
                >
                  <el-option
                    v-for="(item, idx) in groupNameList"
                    :key="idx"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="status">
                <el-select
                  v-model="auditForm.status"
                  placeholder="领导审核状态"
                  clearable
                  style="width: 146px;"
                >
                  <el-option label="待审核" :value="0"></el-option>
                  <el-option label="通过" :value="1"></el-option>
                  <el-option label="不通过" :value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="planStatus">
                <el-select
                  v-model="auditForm.planStatus"
                  placeholder="请选择计划状态"
                  clearable
                  style="width: 146px;"
                >
                  <el-option label="未开始" :value="2"></el-option>
                  <el-option label="进行中" :value="0"></el-option>
                  <el-option label="已完成" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <div class="tool-bar">
                <el-button @click="resetForm('auditForm', 'audit')" size="small">重置</el-button>
                <el-button type="primary" @click="searchAuditPlan" size="small">查询</el-button>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="plan-table-details">
              <el-table
                :data="auditPlanTableData"
                border
                stripe
                style="width: 100%;"
                :span-method="mergeSpan"
              >
                <el-table-column
                  prop="typeName"
                  label="计划类型"
                  width="68"
                  header-align="center"
                  align="center"
                >
                  <template slot-scope="scope">{{scope.row.planType===1?'月度计划':'年度计划'}}</template>
                </el-table-column>
                <el-table-column
                  prop="planYear"
                  label="计划年度"
                  width="40"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="planMonth"
                  label="计划月份"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="planGroupName"
                  label="业务组"
                  width="50"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column prop="planTitle" label="计划名称" width="98" header-align="center"></el-table-column>
                <el-table-column
                  prop="steps"
                  label="推进步骤"
                  header-align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      v-text="item.step_title"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    ></div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="steps"
                  label="计划完成时间"
                  width="68"
                  header-align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <div v-text="item.complate_date" class="progress"></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="qtUserNames" label="牵头负责人" width="71" align="center"></el-table-column>
                <el-table-column
                  prop="zrUserNames"
                  label="推进落实人"
                  header-align="center"
                  align="center"
                  width="71"
                ></el-table-column>
                <el-table-column
                  prop="leaderCheckStateName"
                  label="领导审批意见"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="planStatusName"
                  label="计划状态"
                  width="60"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="最新更新进度"
                  width="68"
                  header-align="center"
                  align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <div v-text="item.step_progress+'%'" class="progress"></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="更新记录"
                  width="40"
                  header-align="center"
                  align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <el-link
                        type="primary"
                        class="progress"
                        :underline="false"
                        @click="showStepDetail(item)"
                      >查看</el-link>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="68" header-align="center" align="center">
                  <template slot-scope="scope">
                    <el-link
                      :type="scope.row.leaderCheckState===1?'info':'danger'"
                      :underline="false"
                      :disabled="scope.row.leaderCheckState===1"
                      @click="auditPlan(scope.row)"
                    >审核</el-link>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="auditPlanSizeChange"
                @current-change="auditPlanCurrentChange"
                :current-page="auditForm.page"
                :page-sizes="[10, 20, 30, 40,50]"
                :page-size="auditForm.size"
                :layout="PAGE_LAYOUT"
                :total="auditPlanTableTotal"
              ></el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!-- 年度计划 -->
        <el-tabs @tab-click="yearTabClick" v-show="sideActive === 0" class="el-tabs-first-indent">
          <!-- 大学政治工作年度计划 -->
          <el-tab-pane label="大学政治工作年度计划">
              <el-form :inline="true" ref="deptYearForm" :model="deptYearForm" size="small">
                  <el-form-item prop="planTitle">
                    <el-input
                    v-model="deptYearForm.planTitle"
                    clearable
                    placeholder="请输入计划名称"
                    style="width: 146px;"
                    ></el-input>
                </el-form-item>
                  <el-form-item prop="planYear">
                    <el-date-picker
                    v-model="deptYearForm.planYear"
                    type="year"
                    value-format="yyyy"
                    placeholder="请选择计划年度"
                    clearable
                    style="width: 156px;"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item prop="planGroupId">
                    <el-select
                    v-model="deptYearForm.planGroupId"
                    placeholder="请选择业务组"
                    clearable
                    style="width: 146px;"
                    >
                    <template v-for="(item, idx) in groupNameList">
                        <el-option :key="idx" :label="item.label" :value="item.value"></el-option>
                    </template>
                    </el-select>
                </el-form-item>
                <el-form-item prop="planStatus">
                    <el-select
                    v-model="deptYearForm.planStatus"
                    placeholder="请选择计划状态"
                    clearable
                    style="width: 146px;"
                    >
                    <el-option label="未开始" :value="2"></el-option>
                    <el-option label="进行中" :value="0"></el-option>
                    <el-option label="已完成" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <div class="tool-bar">
                    <el-button @click="resetForm('deptYearForm', 'deptYear')" size="small">重置</el-button>
                    <el-button type="primary" @click="deptYearPlan" size="small">查询</el-button>
                </div>
            </el-form>
            <el-divider></el-divider>
            <div class="plan-table-details">
              <el-table :data="deptYearPlanList" border stripe style="width: 100%;">
                <el-table-column
                  prop="planType"
                  label="计划类型"
                  width="68"
                  header-align="center"
                  align="center"
                >
                  <template slot-scope="scope">{{scope.row.planType===1?'月度计划':'年度计划'}}</template>
                </el-table-column>
                <el-table-column
                  prop="planYear"
                  label="计划年度"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <!-- <el-table-column
                  prop="planMonth"
                  label="计划月份"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>-->
                <el-table-column
                  prop="planGroupName"
                  label="业务组"
                  width="60"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column prop="planTitle" label="计划名称" width="68" header-align="center"></el-table-column>
                <el-table-column
                  prop="steps"
                  label="推进步骤"
                  header-align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      v-text="item.step_title"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    ></div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="steps"
                  label="计划完成时间"
                  width="68"
                  header-align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <div v-text="item.complate_date" class="progress"></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="qtUserNames" label="牵头负责人" width="71" align="center"></el-table-column>
                <el-table-column
                  prop="zrUserNames"
                  label="推进落实人"
                  header-align="center"
                  align="center"
                  width="71"
                ></el-table-column>
                <!-- <el-table-column
                  prop="leaderCheckStateName"
                  label="领导审批意见"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>-->
                <el-table-column
                  prop="planStatusName"
                  label="计划状态"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="最新更新进度"
                  width="68"
                  header-align="center"
                  align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <div v-text="item.step_progress+'%'" class="progress"></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="更新记录"
                  width="68"
                  header-align="center"
                  align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <el-link
                        type="primary"
                        class="progress"
                        :underline="false"
                        @click="showStepDetail(item)"
                      >查看</el-link>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="deptYearSizeChange"
                @current-change="deptYearPageChange"
                :current-page="deptYearForm.pageNumber"
                :page-sizes="[10, 20, 30, 40,50]"
                :page-size="deptYearForm.pageSize"
                :layout="PAGE_LAYOUT"
                :total="deptYearTotal"
              ></el-pagination>
            </div>
          </el-tab-pane>
          <!-- 大学政治工作月度计划 -->
          <el-tab-pane label="大学政治工作月度计划">
            <el-form :inline="true" ref="deptMonthForm" :model="deptMonthForm" size="small">
                <el-form-item prop="planTitle">
                    <el-input
                    v-model="deptMonthForm.planTitle"
                    clearable
                    placeholder="请输入计划名称"
                    style="width: 146px;"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="planYear">
                    <el-date-picker
                    v-model="deptMonthForm.planYear"
                    type="year"
                    value-format="yyyy"
                    placeholder="请选择计划年度"
                    clearable
                    style="width: 156px;"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item prop="planGroupId">
                    <el-select
                    v-model="deptMonthForm.planGroupId"
                    placeholder="请选择业务组"
                    clearable
                    style="width: 146px;"
                    >
                    <template v-for="(item, idx) in groupNameList">
                        <el-option :key="idx" :label="item.label" :value="item.value"></el-option>
                    </template>
                    </el-select>
                </el-form-item>
                <el-form-item prop="planStatus">
                    <el-select
                    v-model="deptMonthForm.planStatus"
                    placeholder="请选择计划状态"
                    clearable
                    style="width: 146px;"
                    >
                    <el-option label="未开始" :value="2"></el-option>
                    <el-option label="进行中" :value="0"></el-option>
                    <el-option label="已完成" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <div class="tool-bar">
                    <el-button @click="resetForm('deptMonthForm', 'deptMonth')" size="small">重置</el-button>
                    <el-button type="primary" @click="deptMonthPlan" size="small">查询</el-button>
                </div>
            </el-form>
            <el-divider></el-divider>
            <div class="plan-table-details">
              <el-table :data="deptMonthPlanList" border stripe style="width: 100%;">
                <el-table-column
                  prop="planType"
                  label="计划类型"
                  width="68"
                  header-align="center"
                  align="center"
                >
                  <template slot-scope="scope">{{scope.row.planType===1?'月度计划':'年度计划'}}</template>
                </el-table-column>
                <el-table-column
                  prop="planYear"
                  label="计划年度"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <!-- <el-table-column
                  prop="planMonth"
                  label="计划月份"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>-->
                <el-table-column
                  prop="planGroupName"
                  label="业务组"
                  width="60"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column prop="planTitle" label="计划名称" width="68" header-align="center"></el-table-column>
                <el-table-column
                  prop="steps"
                  label="推进步骤"
                  header-align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      v-text="item.step_title"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    ></div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="steps"
                  label="计划完成时间"
                  width="68"
                  header-align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <div v-text="item.complate_date" class="progress"></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="qtUserNames" label="牵头负责人" width="71" align="center"></el-table-column>
                <el-table-column
                  prop="zrUserNames"
                  label="推进落实人"
                  header-align="center"
                  align="center"
                  width="71"
                ></el-table-column>
                <!-- <el-table-column
                  prop="leaderCheckStateName"
                  label="领导审批意见"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>-->
                <el-table-column
                  prop="planStatusName"
                  label="计划状态"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="最新更新进度"
                  width="68"
                  header-align="center"
                  align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <div v-text="item.step_progress+'%'" class="progress"></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="更新记录"
                  width="68"
                  header-align="center"
                  align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <el-link
                        type="primary"
                        class="progress"
                        :underline="false"
                        @click="showStepDetail(item)"
                      >查看</el-link>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="deptMonthSizeChange"
                @current-change="deptMonthPageChange"
                :current-page="deptMonthForm.pageNumber"
                :page-sizes="[10, 20, 30, 40,50]"
                :page-size="deptMonthForm.pageSize"
                :layout="PAGE_LAYOUT"
                :total="deptMonthTotal"
              ></el-pagination>
            </div>
          </el-tab-pane>
          <!-- 单位政治工作年度计划 -->
          <el-tab-pane label="单位政治工作年度计划">
            <el-form :inline="true" ref="yearForm" :model="yearForm" size="small">
              <el-form-item prop="planTitle">
                <el-input
                  v-model="yearForm.planTitle"
                  clearable
                  placeholder="请输入计划名称"
                  style="width: 146px;"
                ></el-input>
              </el-form-item>
              <el-form-item prop="planYear">
                <el-date-picker
                  v-model="yearForm.planYear"
                  type="year"
                  value-format="yyyy"
                  placeholder="请选择计划年度"
                  clearable
                  style="width: 156px;"
                ></el-date-picker>
              </el-form-item>
              <!-- <el-form-item prop="planMonth">
                <el-date-picker
                  v-model="yearForm.planMonth"
                  type="month"
                  placeholder="请选择计划月份"
                  clearable
                  style="width: 156px;"
                  value-format="yyyy-MM"
                ></el-date-picker>
              </el-form-item>-->
              <el-form-item prop="planGroupId">
                <el-select
                  v-model="yearForm.planGroupId"
                  placeholder="请选择业务组"
                  clearable
                  style="width: 146px;"
                >
                  <template v-for="(item, idx) in groupNameList">
                    <el-option :key="idx" :label="item.label" :value="item.value"></el-option>
                  </template>
                </el-select>
              </el-form-item>
              <el-form-item prop="planStatus">
                <el-select
                  v-model="yearForm.planStatus"
                  placeholder="请选择计划状态"
                  clearable
                  style="width: 146px;"
                >
                  <el-option label="未开始" :value="2"></el-option>
                  <el-option label="进行中" :value="0"></el-option>
                  <el-option label="已完成" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <div class="tool-bar">
                <el-button @click="resetForm('yearForm', 'year')" size="small">重置</el-button>
                <el-button type="primary" @click="searchYearPlan" size="small">查询</el-button>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="plan-table-details">
              <el-table :data="yearPlanList" border stripe style="width: 100%;">
                <el-table-column
                  prop="planType"
                  label="计划类型"
                  width="68"
                  header-align="center"
                  align="center"
                >
                  <template slot-scope="scope">{{scope.row.planType===1?'月度计划':'年度计划'}}</template>
                </el-table-column>
                <el-table-column
                  prop="planYear"
                  label="计划年度"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <!-- <el-table-column
                  prop="planMonth"
                  label="计划月份"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>-->
                <el-table-column
                  prop="planGroupName"
                  label="业务组"
                  width="60"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column prop="planTitle" label="计划名称" width="68" header-align="center"></el-table-column>
                <el-table-column
                  prop="steps"
                  label="推进步骤"
                  header-align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      v-text="item.step_title"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    ></div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="steps"
                  label="计划完成时间"
                  width="68"
                  header-align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <div v-text="item.complate_date" class="progress"></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="qtUserNames" label="牵头负责人" width="71" align="center"></el-table-column>
                <el-table-column
                  prop="zrUserNames"
                  label="推进落实人"
                  header-align="center"
                  align="center"
                  width="71"
                ></el-table-column>
                <!-- <el-table-column
                  prop="leaderCheckStateName"
                  label="领导审批意见"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>-->
                <el-table-column
                  prop="planStatusName"
                  label="计划状态"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="最新更新进度"
                  width="68"
                  header-align="center"
                  align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <div v-text="item.step_progress+'%'" class="progress"></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="更新记录"
                  width="68"
                  header-align="center"
                  align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <el-link
                        type="primary"
                        class="progress"
                        :underline="false"
                        @click="showStepDetail(item)"
                      >查看</el-link>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="yearSizeChange"
                @current-change="yearPageChange"
                :current-page="yearForm.pageNumber"
                :page-sizes="[10, 20, 30, 40,50]"
                :page-size="yearForm.pageSize"
                :layout="PAGE_LAYOUT"
                :total="yearTotal"
              ></el-pagination>
            </div>
          </el-tab-pane>
          <!-- 单位政治工作月度计划-->
          <el-tab-pane label="单位政治工作月度计划" class="group-panel">
            <el-form :inline="true" ref="monthForm" :model="monthForm" size="small">
              <!-- <el-form-item prop="planType">
                <el-select
                  v-model="monthForm.planType"
                  placeholder="请选择计划类型"
                  clearable
                  style="width: 146px;"
                >
                  <el-option label="月度计划" :value="1"></el-option>
                  <el-option label="年度计划" :value="2"></el-option>
                </el-select>
              </el-form-item>-->
              <el-form-item prop="planTitle">
                <el-input
                  v-model="monthForm.planTitle"
                  clearable
                  placeholder="请输入计划名称"
                  style="width: 146px;"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item prop="planYear">
                <el-date-picker
                  v-model="monthForm.planYear"
                  type="year"
                  value-format="yyyy"
                  placeholder="请选择计划年度"
                  clearable
                  style="width: 156px;"
                ></el-date-picker>
              </el-form-item>-->
              <el-form-item prop="planMonth">
                <el-date-picker
                  v-model="monthForm.planMonth"
                  type="month"
                  placeholder="请选择计划月份"
                  clearable
                  style="width: 156px;"
                  value-format="yyyy-MM"
                ></el-date-picker>
              </el-form-item>
              <el-form-item prop="planGroupId">
                <el-select
                  v-model="monthForm.planGroupId"
                  placeholder="请选择业务组"
                  clearable
                  style="width: 146px;"
                >
                  <template v-for="(item, idx) in groupNameList">
                    <el-option :key="idx" :label="item.label" :value="item.value"></el-option>
                  </template>
                </el-select>
              </el-form-item>
              <el-form-item prop="planStatus">
                <el-select
                  v-model="monthForm.planStatus"
                  placeholder="请选择计划状态"
                  clearable
                  style="width: 146px;"
                >
                  <el-option label="未开始" :value="2"></el-option>
                  <el-option label="进行中" :value="0"></el-option>
                  <el-option label="已完成" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item prop="status" style="margin-right:0px;">
                <el-select
                  v-model="groupForm.status"
                  placeholder="领导审核状态"
                  clearable
                  style="width: 146px;"
                >
                  <el-option label="待审核" :value="0"></el-option>
                  <el-option label="通过" :value="1"></el-option>
                  <el-option label="不通过" :value="2"></el-option>
                </el-select>
              </el-form-item>-->
              <div class="tool-bar">
                <el-button @click="resetForm('monthForm', 'month')" size="small">重置</el-button>
                <el-button type="primary" @click="searchMonthPlan" size="small">查询</el-button>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="plan-table-details">
              <el-table :data="monthPlanList" border stripe style="width: 100%;">
                <el-table-column
                  prop="planType"
                  label="计划类型"
                  width="68"
                  header-align="center"
                  align="center"
                >
                  <template slot-scope="scope">{{scope.row.planType===1?'月度计划':'年度计划'}}</template>
                </el-table-column>
                <!-- <el-table-column
                  prop="planYear"
                  label="计划年度"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>-->
                <el-table-column
                  prop="planMonth"
                  label="计划月份"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="planGroupName"
                  label="业务组"
                  width="60"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column prop="planTitle" label="计划名称" width="68" header-align="center"></el-table-column>
                <el-table-column
                  prop="steps"
                  label="推进步骤"
                  header-align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      v-text="item.step_title"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    ></div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="steps"
                  label="计划完成时间"
                  width="68"
                  header-align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <div v-text="item.complate_date" class="progress"></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="qtUserNames" label="牵头负责人" width="71" align="center"></el-table-column>
                <el-table-column
                  prop="zrUserNames"
                  label="推进落实人"
                  header-align="center"
                  align="center"
                  width="71"
                ></el-table-column>
                <!-- <el-table-column
                  prop="leaderCheckStateName"
                  label="领导审批意见"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>-->
                <el-table-column
                  prop="planStatusName"
                  label="计划状态"
                  width="68"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="最新更新进度"
                  width="68"
                  header-align="center"
                  align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <div v-text="item.step_progress+'%'" class="progress"></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="更新记录"
                  width="68"
                  header-align="center"
                  align="center"
                  class-name="clear-p"
                >
                  <template slot-scope="scope">
                    <div
                      v-for="(item,index) in scope.row.steps"
                      :key="index"
                      :class="[index===scope.row.steps.length-1?'last':'','bor-bottom']"
                    >
                      <div v-text="item.step_title" style="color:white;visibility: collapse;"></div>
                      <el-link
                        type="primary"
                        class="progress"
                        :underline="false"
                        @click="showStepDetail(item)"
                      >查看</el-link>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="monthSizeChange"
                @current-change="monthPageChange"
                :current-page="monthForm.pageNumber"
                :page-sizes="[10, 20, 30, 40,50]"
                :page-size="monthForm.pageSize"
                :layout="PAGE_LAYOUT"
                :total="monthToal"
              ></el-pagination>
            </div>
          </el-tab-pane>

        </el-tabs>
      </el-main>
    </el-container>

    <!-- 更新记录 -->
    <el-dialog
      title="更新记录"
      :visible.sync="showStepUpdateDialog"
      :close-on-click-modal="false"
      width="600px"
    >
      <el-table :data="planUpdateData" border stripe>
        <el-table-column property="name" label="操作人" width="100" align="center"></el-table-column>
        <el-table-column property="date" label="操作时间" width="150" align="center"></el-table-column>
        <el-table-column property="progress" label="更新进度" align="center">
          <template slot-scope="scope">{{scope.row.progress+'%'}}</template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 审批 -->
    <el-dialog
      title="审批"
      :visible.sync="showAuditDialog"
      :close-on-click-modal="false"
      width="600px"
    >
      <el-form ref="auditSubmitForm" :model="auditSubmitForm" label-width="90px">
        <el-form-item label="审核：" prop="status">
          <el-select
            v-model="auditSubmitForm.status"
            placeholder="领导审核状态"
            clearable
            style="width: 146px;"
          >
            <el-option label="通过" :value="1"></el-option>
            <el-option label="驳回" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核意见：" prop="remark">
          <el-input type="textarea" v-model="auditSubmitForm.remark" placeholder="请输入审批意见"></el-input>
        </el-form-item>
        <el-form-item class="audit-dialog-toolbar">
          <el-button @click="showAuditDialog=false" size="small">取消</el-button>
          <el-button type="primary" @click="submitAudit" :loading="btnLoading" size="small">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 提交审核 -->
    <el-dialog
      title="提交审核"
      :visible.sync="showSubmitAuditDialog"
      :close-on-click-modal="false"
      width="600px"
    >
      <div style="text-align:center;">
        <div>
          请选择审批领导：
          <el-select
            v-model="approvalForm.leaderCheckUser"
            size="small"
            placeholder="请输入/选择审批人"
            clearable
            filterable
            style="width: 146px;"
          >
            <el-option
              v-for="(item, idx) in auditLeaderList"
              :label="item.label"
              :value="item.value"
              :key="'leaderCheckUser' + idx"
            ></el-option>
          </el-select>
        </div>
        <div class="audit-dialog-toolbar" style="margin-top:20px;">
          <el-button @click="showSubmitAuditDialog=false" size="small">取消</el-button>
          <el-button type="primary" @click="submitAuditLeader" :loading="btnLoading" size="small">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <PlanCard title="添加" :visible="addDialogShow" @close="onAddClose" @submit="onAddSubmit"></PlanCard>
    <PlanCard
      title="编辑"
      :visible="editDialogShow"
      :data="targetRow"
      @close="onEditClose"
      :mode="'edit'"
    ></PlanCard>
  </div>
</template>
<script>
const PlanCard = () => import('@/components/PlanCard')

function getPlanStatusText(value) {
  value = value || 0

  let text = ''
  switch (value) {
    case 0:
      text = '进行中'
      break
    case 1:
      text = '已完成'
      break
    case 2:
      text = '未开始'
      break
  }
  return text
}

function getLeaderCheckStateText(value) {
  let text = ''
  switch (value) {
    case 0:
      text = '待审核'
      break
    case 1:
      text = '通过'
      break
    case 2:
      text = '不通过'
      break
  }
  return text
}

function comparePlan(target, object) {
  let isAlike = true
  let message = ''
  if (target.planType !== object.planType) {
    isAlike = false
    message = '计划类型'
  }
  if (target.planYear !== object.planYear) {
    isAlike = false
    message = '计划年份'
  }
  if (target.planMonth !== object.planMonth) {
    isAlike = false
    message = '计划月份'
  }
  if (target.planGroupId !== object.planGroupId) {
    isAlike = false
    message = '业务组'
  }
  return {
    isAlike,
    message
  }
}

function serializePlan(planGroup) {
  const planList = []
  planGroup.plans.forEach((item, index) => {
    item.leaderCheckState = planGroup.leaderCheckState
    item.planGroupId = planGroup.planGroupId
    item.planGroupName = planGroup.planGroupName
    item.planIds = planGroup.planIds
    item.planType = planGroup.planType
    item.planMonth = planGroup.planMonth
    item.planYear = planGroup.planYear
    item.leaderCheckStateName = getLeaderCheckStateText(item.leaderCheckState)
    item.planStatusName = getPlanStatusText(item.planStatus)
    // 每一组的第一项占用多行，其它项不占用行。
    item.rowSpan = index === 0 ? planGroup.plans.length : 0

    planList.push(item)
  })
  return planList
}

export default {
  name: 'PoliticalWorkPlan',
  components: {
    PlanCard
  },
  data() {
    return {
      permissions: {
        add: 0,
        group: 0,
        leader: 0
      },
      sideList: ['工作计划', '我的计划'],
      sideActive: 0,
      addForm: {
        planType: null,
        name: '',
        year: null,
        month: null,
        group: null,
        status: null,
        page: 1,
        size: 10,
        planStatus: null
      },
      auditForm: {
        planType: null,
        name: '',
        year: null,
        month: null,
        group: null,
        status: null,
        page: 1,
        size: 10,
        planStatus: null
      },
      planTableData: [],
      planTableTotal: 0,
      planUpdateData: [],
      showStepUpdateDialog: false,
      auditPlanTableData: [],
      auditPlanTableTotal: 0,
      showAuditDialog: false,
      auditSubmitForm: {
        status: null,
        remark: '',
        planIds: ''
      },
      showSubmitAuditDialog: false,
      auditLeaderId: null,
      auditLeaderList: [],
      groupTableData: [],
      groupTableTotal: 0,
      groupForm: {
        planType: null,
        name: '',
        year: null,
        month: null,
        group: null,
        status: null,
        page: 1,
        size: 10,
        planStatus: null
      },
      groupNameList: [],
      // 添加/编辑相关的 dialog 控制
      addDialogShow: false,
      editDialogShow: false,
      targetRow: {},
      // 汇总提交审核
      approvalForm: {
        planIds: '',
        leaderCheckUser: ''
      },
      btnLoading: false,
      yearForm: {
        planType: 2,
        planTitle: '',
        planYear: '',
        planMonth: '',
        planGroupId: '',
        pageNumber: 1,
        pageSize: 10,
        planStatus: null
      },
      deptYearForm: {
        planType: 2,
        planTitle: '',
        planYear: '',
        planMonth: '',
        planGroupId: '',
        pageNumber: 1,
        pageSize: 10,
        planStatus: null
      },
      deptMonthForm: {
        planType: 1,
        planTitle: '',
        planYear: '',
        planMonth: '',
        planGroupId: '',
        pageNumber: 1,
        pageSize: 10,
        planStatus: null
      },
      monthForm: {
        planType: 1,
        planTitle: '',
        planYear: '',
        planMonth: '',
        planGroupId: '',
        pageNumber: 1,
        pageSize: 10,
        planStatus: null
      },
      deptMonthTotal: 0,
      deptYearTotal: 0,
      yearTotal: 0,
      monthToal: 0,
      deptYearPlanList: [],
      deptMonthPlanList: [],
      yearPlanList: [],
      monthPlanList: []
    }
  },
  created() {
    this.$store.commit('updateActiveMenu', '/LearningHome/PoliticalWorkPlan')

    const query = this.$route.query
    if (query.tab) {
      this.sideActive = query.tab
    }

    // 权限处理
    let userInfo = null
    try {
      userInfo = JSON.parse(localStorage.getItem('USER_INFO'))
    } catch (ex) {
      console.log(ex)
    }
    if (userInfo) {
      this.permissions.add = userInfo.isPlanAdd
      this.permissions.group = userInfo.isPlanGroup
      this.permissions.leader = userInfo.isPlanLeader
      if (!this.permissions.add && !this.permissions.group && this.permissions.leader) {
        this.sideList.splice(1, 1)
      }
    }

    this.searchPlan()
    this.searchAuditPlan()
    this.searchGroupPlan()
    this.initGroupNameList()
    this.fetchAuditLeaderList()
    this.deptYearPlan()
    this.deptMonthPlan()
    this.searchYearPlan()
    this.searchMonthPlan()

    console.log('user info', localStorage.getItem('USER_INFO'))
  },
  methods: {
    resetForm(refId, tag) {
      this.$refs[refId].resetFields()
      switch (tag) {
        case 'add':
          this.searchPlan()
          break;
        case 'group':
          this.searchGroupPlan()
          break;
        case 'audit':
          this.searchAuditPlan()
          break;
        case 'year':
          this.searchYearPlan()
          break;
        case 'month':
          this.searchMonthPlan()
          break;
        case 'deptYear':
          this.deptYearPlan()
          break;
        case 'deptMonth':
          this.deptMonthPlan()
          break;
      }
    },
    searchPlan() {
      this.planTableData = []
      // 请求接口
      utils.post(utils.api.politicalWorkPlan.myList, {
        pageNumber: this.addForm.page,
        pageSize: this.addForm.size,
        planType: this.addForm.planType,
        planTitle: this.addForm.name,
        planYear: this.addForm.year,
        planMonth: this.addForm.month,
        leaderCheckState: this.addForm.status,
        planGroupId: this.addForm.group
      }, res => {
        if (res.success) {
          for (let i = 0; i < res.data.rows.length; i++) {
            res.data.rows[i].leaderCheckStateName = getLeaderCheckStateText(res.data.rows[i].leaderCheckState)
            res.data.rows[i].planStatusName = getPlanStatusText(res.data.rows[i].planStatus)
          }
          this.planTableData = res.data.rows
          this.planTableTotal = res.data.total
        }
      })
    },
    planAddSizeChange(val) {
      this.addForm.size = val
      this.searchPlan()
    },
    planAddCurrentChange(val) {
      this.addForm.page = val
      this.searchPlan()
    },
    showStepDetail(element) {
      this.getStepUpdateData(element)
    },
    delPlan(row) {
      this.$confirm('确认删除该计划？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        utils.post('plan/remove', {
          planId: row.planId
        }, res => {
          if (res.success) {
            this.syncTables()
          }
        })
      })
    },
    getStepUpdateData(element) {
      if (process.env.NODE_ENV !== 'production') {
        console.log('step:', element)
      }
      this.planUpdateData = []
      utils.post('plan/stepRecord', {
        id: element.id
      }, res => {
        if (res.success) {
          const recordList = res.data.map(item => {
            return {
              name: item.userName,
              date: item.createTime,
              progress: item.progress,
              content: item.content
            }
          })
          this.planUpdateData = recordList
        }
      })
      this.showStepUpdateDialog = true
    },
    searchAuditPlan() {
      this.auditPlanTableData = []
      // 请求接口
      utils.post(utils.api.politicalWorkPlan.leaderList, {
        pageNumber: this.auditForm.page,
        pageSize: this.auditForm.size,
        planType: this.auditForm.planType,
        planTitle: this.auditForm.name,
        planYear: this.auditForm.year,
        planMonth: this.auditForm.month,
        leaderCheckState: this.auditForm.status,
        planGroupId: this.auditForm.group
      }, res => {
        if (res.success) {
          let planList = []
          for (let i = 0; i < res.data.rows.length; i++) {
            res.data.rows[i].leaderCheckStateName = getLeaderCheckStateText(res.data.rows[i].leaderCheckState)
            res.data.rows[i].planStatusName = getPlanStatusText(res.data.rows[i].planStatus)
            planList = planList.concat(serializePlan(res.data.rows[i]))
          }

          this.auditPlanTableData = planList
          // this.auditPlanTableData = res.data.rows
          this.auditPlanTableTotal = res.data.total
        }
      })
    },
    auditPlanSizeChange(val) {
      this.auditForm.size = val
      this.searchAuditPlan()
    },
    auditPlanCurrentChange(val) {
      this.auditForm.page = val
      this.searchAuditPlan()
    },
    auditPlan(row) {
      this.showAuditDialog = true
      this.auditSubmitForm.planIds = row.planIds
    },
    submitAudit() {
      if (!this.auditSubmitForm.status) {
        this.$message.error('请选择审核状态')
        return;
      }
      this.btnLoading = true
      utils.post(utils.api.politicalWorkPlan.leaderApproval, {
        planIds: this.auditSubmitForm.planIds,
        leaderCheckState: this.auditSubmitForm.status,
        leaderCheckRemark: this.auditSubmitForm.remark
      }, res => {
        if (res.success) {
          this.resetForm('auditSubmitForm')
          this.showAuditDialog = false
          this.searchAuditPlan()
        }
        this.btnLoading = false
      })
    },
    submitAuditLeader() {
      if (!this.approvalForm.planIds) {
        this.$message.error('请选择要提交的计划')
        return;
      }
      const planIdList = this.approvalForm.planIds.split(',')
      const planAmount = planIdList.length
      if (planAmount > 1) {
        const planList = []
        this.groupTableData.forEach(item => {
          if (~planIdList.indexOf(item.planId)) {
            planList.push(item)
          }
        })
        const firstPlan = planList[0]
        let validated = true
        let errorMessage = ''
        for (let i = 0; i < planAmount; i++) {
          if (i === 0) {
            continue
          }
          const result = comparePlan(firstPlan, planList[i])
          if (!result.isAlike) {
            validated = false
            errorMessage = `请选择属于同一${result.message}的计划`
            break
          }
        }
        if (!validated) {
          this.$message.error(errorMessage)
          return
        }
      }
      if (!this.approvalForm.leaderCheckUser) {
        this.$message.error('请选择审批领导')
        return;
      }
      this.btnLoading = true
      utils.post('plan/groupApproval', this.approvalForm, res => {
        if (res.success) {
          this.syncTables()
          this.showSubmitAuditDialog = false
        }
        this.btnLoading = false
      })
      // this.auditLeaderId = null
      // this.showSubmitAuditDialog = false
    },
    groupSubmitAudit() {
      this.showSubmitAuditDialog = true
    },
    searchGroupPlan() {
      this.groupTableData = []
      // 请求接口
      utils.post(utils.api.politicalWorkPlan.groupList, {
        pageNumber: this.groupForm.page,
        pageSize: this.groupForm.size,
        planType: this.groupForm.planType,
        planTitle: this.groupForm.name,
        planYear: this.groupForm.year,
        planMonth: this.groupForm.month,
        leaderCheckState: this.groupForm.status,
        planGroupId: this.groupForm.group
      }, res => {
        if (res.success) {
          for (let i = 0; i < res.data.rows.length; i++) {
            res.data.rows[i].leaderCheckStateName = getLeaderCheckStateText(res.data.rows[i].leaderCheckState)
            res.data.rows[i].planStatusName = getPlanStatusText(res.data.rows[i].planStatus)
          }
          this.groupTableData = res.data.rows
          this.groupTableTotal = res.data.total
        }
      })
    },
    groupSizeChange(val) {
      this.groupForm.size = val
      this.searchGroupPlan()
    },
    groupCurrentChange(val) {
      this.groupForm.page = val
      this.searchGroupPlan()
    },
    addPlan() {
      this.addDialogShow = true
    },
    onAddClose() {
      this.addDialogShow = false
    },
    onAddSubmit() {
      this.syncTables()
    },
    editPlan(value) {
      // 设置为目标对象
      this.targetRow = value
      this.editDialogShow = true
    },
    onEditClose() {
      this.editDialogShow = false
    },
    initGroupNameList() {
      const GROUP_LIST = 'GROUP_LIST'
      localStorage.removeItem(GROUP_LIST)

      utils.post(utils.api.politicalWorkPlan.groupNameList, {}, res => {
        if (res.success) {
          const options = res.data.map(item => {
            return {
              label: item.planGroupName,
              value: item.planGroupId
            }
          })
          this.groupNameList = options
          // 缓存下来供组件部分复用
          localStorage.setItem(GROUP_LIST, JSON.stringify(options))
        }
      })
    },
    fetchAuditLeaderList() {
      utils.get('plan/planUserList?userType=3', res => {
        const options = res.data.map(item => {
          return {
            label: item.user_name,
            value: item.user_id
          }
        })
        this.auditLeaderList = options
      })
    },
    onSelectionChange(rows) {
      if (rows.length) {
        const ids = []
        rows.forEach(item => {
          ids.push(item.planId)
        })
        this.approvalForm.planIds = ids.join(',')
      } else {
        this.approvalForm.planIds = ''
      }
    },
    // 用于处理更新数据后，刷新所有列表数据。
    syncTables() {
      this.searchPlan()
      this.searchGroupPlan()
      this.searchAuditPlan()
    },
    mergeSpan({ row, column, rowIndex, columnIndex }) {
      const spanLabels = ['计划类型', '计划年度', '计划月份', '业务组', '领导审批意见', '操作']
      if (~spanLabels.indexOf(column.label)) {
        return {
          rowspan: row.rowSpan,
          colspan: row.rowSpan ? 1 : 0
        }
      }
    },
    changeSide(index) {
      this.sideActive = index
    },
    deptYearPlan() {
        utils.post('plan/displayList', this.deptYearForm, res => {
        if (res.success) {
            for (let i = 0; i < res.data.rows.length; i++) {
                res.data.rows[i].leaderCheckStateName = getLeaderCheckStateText(res.data.rows[i].leaderCheckState)
                res.data.rows[i].planStatusName = getPlanStatusText(res.data.rows[i].planStatus)
            }
            this.deptYearPlanList = res.data.rows
            this.deptYearTotal = res.data.total
            }
        })
    },
    deptMonthPlan() {
        utils.post('plan/displayList', this.deptMonthForm, res => {
        if (res.success) {
            for (let i = 0; i < res.data.rows.length; i++) {
                res.data.rows[i].leaderCheckStateName = getLeaderCheckStateText(res.data.rows[i].leaderCheckState)
                res.data.rows[i].planStatusName = getPlanStatusText(res.data.rows[i].planStatus)
            }
            this.deptMonthPlanList = res.data.rows
            this.deptMonthTotal = res.data.total
            }
        })
    },
    searchYearPlan() {
      utils.post('plan/displayListByDept', this.yearForm, res => {
        if (res.success) {
          for (let i = 0; i < res.data.rows.length; i++) {
            res.data.rows[i].leaderCheckStateName = getLeaderCheckStateText(res.data.rows[i].leaderCheckState)
            res.data.rows[i].planStatusName = getPlanStatusText(res.data.rows[i].planStatus)
          }
          this.yearPlanList = res.data.rows
          this.yearTotal = res.data.total
        }
      })
    },
    searchMonthPlan() {
      utils.post('plan/displayListByDept', this.monthForm, res => {
        if (res.success) {
          for (let i = 0; i < res.data.rows.length; i++) {
            res.data.rows[i].leaderCheckStateName = getLeaderCheckStateText(res.data.rows[i].leaderCheckState)
            res.data.rows[i].planStatusName = getPlanStatusText(res.data.rows[i].planStatus)
          }
          this.monthPlanList = res.data.rows
          this.monthTotal = res.data.total
        }
      })
    },
    yearTabClick(tab, event){
        switch (tab.index) {
            case '0':
            this.deptYearPlan()
            break;
            case '1':
            this.deptMonthPlan()
            break;
            case '2':
            this.searchYearPlan()
            break;
            case '3':
            this.searchMonthPlan()
            break;
        }
    },
    planTabClick(tab, event){
        switch (tab.index) {
            case '0':
            this.searchPlan()
            break;
            case '1':
            this.searchGroupPlan()
            break;
            case '2':
            this.searchAuditPlan()
            break;
        }
    },
    deptYearSizeChange(val) {
        this.deptYearForm.pageSize = val
        this.deptYearPlan()
    },
    deptYearPageChange(val) {
        this.deptYearForm.pageNumber = val
        this.deptYearPlan()
    },
    deptMonthSizeChange(val) {
        this.deptMonthForm.pageSize = val
        this.deptMonthPlan()
    },
    deptMonthPageChange(val) {
        this.deptMonthForm.pageNumber = val
        this.deptMonthPlan()
    },
    yearSizeChange(val) {
      this.yearForm.pageSize = val
      this.searchYearPlan()
    },
    yearPageChange(val) {
      this.yearForm.pageNumber = val
      this.searchYearPlan()
    },
    monthSizeChange(val) {
      this.monthForm.pageSize = val
      this.searchMonthPlan()
    },
    monthPageChange(val) {
      this.monthForm.pageNumber = val
      this.searchMonthPlan()
    }
  }
}
</script>
<style lang="less">
.xd-LearningHome-PoliticalWorkPlan {
  width: 1200px;
  margin: 0 auto;

  .el-container {
    border: solid 1px #cacaca;
    min-height: 1236px;
    margin-top: 23px;
  }

  .el-aside {
    background-color: #ececec;
    border-right: solid 1px #cacaca;

    p {
      margin-top: 0px;
      margin-bottom: 0px;
    }

    .first-title {
      height: 50px;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .item {
      height: 50px;
      display: flex;
      padding-left: 12px;
      align-items: center;
      font-size: 14px;

      img {
        display: none;
      }
    }

    .item.active {
      background-color: #07806c;
      color: white;
      font-weight: bold;
      img {
        display: flex;
        margin-left: auto;
        margin-right: 13px;
      }
    }
  }

  .el-main {
    .el-tabs__nav {
      height: 53px;
    }
    .el-tabs__item {
      margin-top: 5px;
    }

    .el-form--inline {
      padding: 20px 40px 20px 40px;
      .el-form-item {
        margin-right: 20px;
      }
    }

    .tool-bar {
      text-align: right;
      .el-button {
        width: 130px;
        border: solid 1px #cb2c21;
        font-size: 14px;
      }

      .el-button--default {
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #cb2c21;
      }
    }

    .plan-table-details {
      padding: 0px 40px 15px 40px;
      margin-top: 0px;
      // height: 946px;
      .el-table th {
        background-color: #cb2c21;
        font-size: 12px;
      }
      .el-table th .cell {
        padding-left: 5px;
        padding-right: 5px;
        color: white;
        line-height: normal;
      }

      .el-table .el-table__row .cell {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 12px;
        line-height: normal;
      }

      .el-table .el-table__row td.clear-p {
        padding: 0px;
        margin: 0px;
        position: relative;
        .cell {
          padding-top: 2px;
          padding-bottom: 2px;
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-height: 100%;
        }
      }

      .el-table .el-table__row .clear-p .cell {
        padding: 0px;
        line-height: normal;

        .bor-bottom {
          text-align: left;
          padding: 5px 5px;
          border-bottom: solid 1px #eef7f6;
          position: relative;
          display: flex;
          flex: 1;
          height: auto;
        }
        .bor-bottom.last {
          border-bottom: none;
        }

        .progress {
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0px;
          display: flex;
          align-items: center;
          justify-content: center;
          left: 0px;
        }
      }

      .el-pagination {
        background: white;
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .el-table__row.el-table__row--striped td {
        background-color: #eef7f6;
      }
    }

    .audit-panel {
      .plan-table-details {
        height: 1000px;
      }
      .el-divider--horizontal {
        margin-top: 0px;
      }
    }
  }

  .audit-dialog-toolbar {
    .el-button {
      width: 130px;
      background-color: #ffffff;
      border: solid 1px #cb2c21;
    }

    .el-button--default {
      color: #cb2c21;
    }

    .el-button--primary {
      background-color: #cb2c21;
    }
  }

  .el-dialog__header {
    border-bottom: solid 1px #dddddd;
  }

  .el-dialog__title {
    color: #cb2c21;
    font-size: 18px;
    font-weight: bold;
  }

  .group-panel {
    .plan-table-details {
      padding-left: 20px;
    }
  }

  .el-main .plan-table-details .el-table th.check-cell {
    background: white;
  }
}
</style>